<template>
  <div id="WebSave">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu v-bind:fromPath=fromPath></LeftMenu>
    </div>
    <!-- 右菜单 -->
    <div class="RightMenu">
      <RightMenu></RightMenu>
    </div>
    <!-- 网站导航 -->
    <div class="grid">
      <div v-for="item in webs" class="webItem">
        <RouterLink target="_blank" to="/" :href='item.link'>
          <img :src="item.image" :title="item.text" alt="web" class="webLogo">
          <p class="webName">{{ item.webName }}</p>
        </RouterLink>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../components/head/LeftMenu'
import RightMenu from "../../components/head/RightMenu";
import TopNav from '../../components/head/TopNav'
import Footer from '../../components/foot/Footer'

export default {
  name: 'WebSave',
  components: {LeftMenu, RightMenu, TopNav, Footer},
  data() {
    return {
      fromPath: "/",
      webs: [
        {
          image: 'http://codeworld.fun/res/icons/ZhiWan.ico', webName: '中国知网',
          link: 'https://learn.microsoft.com/zh-cn/docs/'
        },
        {
          image: 'http://codeworld.fun/res/icons/Oracle.ico', webName: '甲骨文',
          link: 'https://learn.microsoft.com/zh-cn/docs/'
        },
        {
          image: 'http://codeworld.fun/res/icons/ZhiHu.ico', webName: '知乎',
          link: 'https://learn.microsoft.com/zh-cn/docs/'
        },
        {
          image: 'http://codeworld.fun/res/icons/WenXinYiYan.ico', webName: '文心一言',
          link: 'https://yiyan.baidu.com/'
        },
        {
          image: 'http://codeworld.fun/res/icons/fullStackCn.ico', webName: '全栈中文网',
          link: 'https://www.p2hp.com/'
        },
        {
          image: 'http://codeworld.fun/res/icons/gitee.ico', webName: '码云开源',
          link: 'https://gitee.com/explore'
        },
        {
          image: 'http://codeworld.fun/res/icons/microsoft.ico', webName: '微软文档',
          link: 'https://learn.microsoft.com/zh-cn/docs/'
        },
        {
          image: 'http://codeworld.fun/res/icons/CodeBaoKu.ico', webName: '编程宝库',
          link: 'http://www.codebaoku.com/'
        },
        {
          image: 'http://codeworld.fun/res/icons/runoob.ico', webName: '菜鸟教程',
          link: 'https://www.runoob.com/'
        },
        {
          image: 'http://codeworld.fun/res/icons/mvn.ico', webName: 'MVN仓库',
          link: 'https://mvnrepository.com/'
        },
        {
          image: 'http://codeworld.fun/res/icons/iconfont.ico', webName: '图标库',
          link: 'https://www.iconfont.cn/'
        },
        {
          image: 'http://codeworld.fun/res/icons/WenXinYiGe.ico', webName: '文心一格',
          link: 'https://yige.baidu.com/'
        },
        /*{
          image: 'http://codeworld.fun/res/icons/CodeFree.ico', webName: '自由创意',
          link: 'http://codeworld.fun/freecode'
        },*/
      ]
    }
  },
  created() {
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {          //  这里的vm指的就是vue实例，可以用来当做this使用
      //console.log(to, from, next)
      //console.log("fromPath", from.path, vm.fromPath)
      if (!from.path.includes("/detail" || "/manage")) {
        vm.fromPath = from.path;
      } else {
        vm.fromPath = "/"
      }
      //console.log("fromPath", from.path, vm.fromPath)
    })
  },
  methods: {},
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style>
#WebSave {
  background: url("src/assets/image/cloudForest.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
  opacity: 0.9;
}

.LeftMenu {
}

.RightMenu {
  float: right;
}

.TopNav {
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 5% 10%;
}

.webItem {
  flex-basis: 20%;
  margin: 10px;
  text-align: center;
}

.webLogo {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.footer {
}


</style>
